<template>
	<view class="content">
		<!-- 头部图标、通知栏 -->
		<view class="header-box"
			:style="'height:'+(boundLocal.bottom*1.0 + 6)  +'px;padding-top:' + (boundLocal.top*1.0 +3 )+ 'px;'">
			<image src="../static/text_logo.png" mode="heightFix" class="header-image"
				:style="'height:' + (boundLocal.height - 6) + 'px;'" />
		</view>
		<view class="chooseLocal">
			<view class="chooseLocal left-item" @click="chooseaddress">
				<uni-icons type="location-filled" size="25" color="#fff" />
				<text class="local-name">{{deptData.deptName}}</text>
				<uni-icons class="local-icon2" type="forward" size="15" color="#fff" />
			</view>
			<view class="right-item" @click="toDeliverPage">
				<uni-icons type="cart-filled" size="15" color="#fff" />
				<text class="role-name">配送</text>
			</view>
		</view>

		<!-- 通知栏、轮播图 -->
		<view class="notice-box">
			<uni-notice-bar show-icon scrollable
				:text="noticeBar.length == 0? '印联校园欢迎各位打印好友，商家免费入驻': noticeBar[0].text" />
		</view>
		<view class="slideshow-box">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item class="swiper-item">
					<image  src="../static/temp/silde1.png" mode="aspectFill"/>
				</swiper-item>
				<swiper-item class="swiper-item" v-for="item in NoticeSilde">
					<image  :src="item.image" mode="aspectFill"/>
				</swiper-item>
			</swiper>
		</view>

		<!-- 功能区：a4打印--> 
		<navigator class="function-box a4" url="print/fileupload/index" hover-class="navigator-hover">
			<view class="function-describe">
				<view class="desc-title">配送打印</view>
				<view class="desc-detail">打印>封装>自取/配送</view>
			</view>
			<image class="function-img" mode="widthFix" src="../static/images/delivery_icon.png"></image>			
			<uni-icons class="function-img2" type="forward" size="15" color="#0278FF" />
		</navigator> 
	</view>
</template>

<script>
	import {
		log
	} from 'util';
	import { getAddress } from "@/api/print/address.js";
	import { getNoticeByDeptId } from '@/api/notice/index.js'
	export default {
		data() {
			return {
				//胶囊信息
				boundLocal: {
					width: 86,
					height: 32,
					left: 281,
					top: 24,
					right: 367,
					bottom: 56,
				},
				//通知栏
				noticeBar: [],
				// 轮播图
				NoticeSilde: [],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				//学校信息
				deptData: this.$store.state.system.location,
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN		
			this.getHeight(); 
			// #endif
			this.setLocation();	
			this.getPrintNotice();
		},
		onShow() {		
			if(this.deptData.deptId != undefined && this.deptData.deptId != this.$store.state.system.location.deptId){
				this.noticeBar = []
				this.NoticeSilde = []
				this.deptData = this.$store.state.system.location;
				this.getPrintNotice();
			}else{
				this.deptData = this.$store.state.system.location;
			}
			// this.refreshData();
		},
		methods: {
			// 获取微信右上角胶囊高度
			getHeight() {
				let res = wx.getMenuButtonBoundingClientRect();
				this.boundLocal = res;
				log('res', res)
			},
			//用户设置当前地址
			setLocation(){
				const mylocal = uni.getStorageSync('myLocal');
				if(this.deptData){
					// console.log('this.deptData'+this.deptData+'@');
					// 不为空直接通过 
				}else{
					let that = this
					this.deptData = {}
					this.deptData.deptName = '请选择地址';
					uni.getLocation({
						type: 'wgs84',
						async success(res) {
							console.log('当前位置',res); 
							const data = await getAddress(res.longitude,res.latitude);
							if(data.code != 200 || data.rows.length == 0) return
							that.deptData = data.rows[0];
							that.$store.commit('SET_LOCATION',data.rows[0])
							console.log('学校列表',data)
						}
					}) 				
				}
			},
			// 获取通知			
			getNotice(){				
					const notices = uni.getStorageSync('indexNotice');
					if(true){
						
					}
			},
			//获取首页轮播图
			getSlide(){
					const slides = uni.getStorageSync('indexSlide');				
			},
			//跳转地址搜索
			chooseaddress(){
				uni.navigateTo({
					url: '/pages/print/chooseaddress/index'
				});
			},
			//跳转配送员界面
			toDeliverPage(){
				uni.navigateTo({
					url: '/pages/print/delier/index'
				});
			},
			//获取通知栏、轮播图
			async getPrintNotice(){
				const res = await getNoticeByDeptId(this.deptData.deptId,1);
				if(res.code !=200) return uni.showToast({
					title: '加载通知失败'
				})
				if(res.rows.length != 0) res.rows.forEach(item=>{
					if(item.innerId == 1) this.noticeBar.push(item)
					if(item.innerId == 2) this.NoticeSilde.push(item)
				})
				
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 头部 */
	.header-box {
		background-color: #0278FF;
		width: 100vw;
		height: 90rpx;
		padding-left: 20rpx;
		/* display: flex;
	  justify-content: flex-start;
	  align-items: center; */
	}

	.header-image {
		/* width: 200rpx; */
	}

	.chooseLocal {
		/* border: white solid 1rpx; */
		background-color: #0278FF;
		width: 100vw;
		height: 60rpx;
		padding-left: 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.chooseLocal>.left-item {
		justify-content: flex-start;
	}

	.right-item {
		white-space: nowrap;
		margin-right: 20rpx;
		padding: 0 10rpx;
		color: white;
		border-radius: 40rpx;
		border: white solid 1px;
	}

	.local-name,
	.local-icon2 {
		font-size: larger;
		height: 60rpx;
		line-height: 65rpx;
	}

	/* 通知栏 */
	.notice-box {
		/* background-color: #0278FF; */
		width: 92vw;
		height: 80rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	/* 轮播图 */
	.slideshow-box {
		width: 92vw; 
		margin-top: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
	} 
	.swiper {
		width: 100%;
		height: 320rpx;
	}
	.swiper-item {
		width: 100%;
		display: block;
		height: 320rpx;
		line-height: 300rpx;
		text-align: center;
	} 
	
	/* 功能 A4A3打印 */
	.function-box{
		width: 92vw;
		height: 260rpx;
		background-color: #d6eeff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.function-describe{
		width: 350rpx;
		padding-left: 50rpx;
	}
	.desc-title{
		font-size: x-large;
	}
	.desc-detail{
		margin-top: 10rpx;
		color: #797979;
	}
	.function-img{
		margin-top: -20rpx;
		width: 250rpx;
	}
	.function-img2{
		padding-right: 20rpx;
	}
</style>
